import { FC, useRef, useEffect, createRef, forwardRef } from "react"
//函数组件是不能直接使用Ref来引用的

//forwardRef(函数组件) 可以用于传递Ref 也可以让子组件暴露方法给父组件

//ts类型 forwardRef<ref类型,props类型>()
type h = HTMLInputElement | null;
type p = {
    age: number
}
// 步骤二:创建一个组件,并且使用forwardRef包裹
const Child = forwardRef<h, p>((props, ref) => {
    console.log('child组件的', props)
    return (
        <fieldset>
            <legend>Child</legend>
            {/* 步骤四:接收到父组件传递的Ref */}
            <h1 ref={ref}>一个子组件</h1>
        </fieldset>
    )
})

const Forward: FC<any> = () => {
    let ipt = useRef<HTMLInputElement>(null)
    //步骤一:
    //要传递的Ref
    let c = useRef<h>(null)
    //父组件中可以获取子组件中的h1标签
    useEffect(() => {
        console.log(ipt)
        console.log(c.current!.style.color = 'deeppink')
    })
    return (
        <fieldset>
            <legend>forward</legend>
            <input type="text" ref={ipt} />
            {/* 步骤三:展示组件,并且打上Ref */}
            <Child ref={c} age={30} />
        </fieldset>
    )
}

export default Forward